import React from "react";
import MyInput from "./MyInput";
type UserInfo = "username" | "email" | "password" | "confirmPassword"
interface User{
    username:string
    email:string
    password:string
    confirmPassword:string
}
interface IProps {

}

interface IState {
    type: "signIn" | "signUp"
    user:User
}

export default class SignInUp extends React.Component<IProps, IState> {
    constructor(props: IProps) {
        super(props);
        this.state = {
            type: "signIn",
            user: {
                username: "",
                email: "",
                password: "",
                confirmPassword: ""
            }
        }
    }
    handleUpdateUser = (label:string,value:string) => {
        const user = this.state.user
        user[label as UserInfo] = value
        this.setState({user})
    }
    toLogin = () => {
        this.setState({type: "signIn"})
    }
    handleSubmit = () => {
        console.log(this.state.user)
    }
    toSignUp = () => {
        this.setState({type: "signUp"})
    }
    render() {
        return (
            <div className="container">
                {
                    this.state.type === "signIn" ?
                        <div key={"signIn"} className={"form signIn"}>
                            <h2>Sign In</h2>
                            <MyInput onChange={this.handleUpdateUser} icon={"user"} value={""} label={"username"}/>
                            <MyInput onChange={this.handleUpdateUser} icon={"lock"} value={""} label={"password"} type={"password"}/>
                            <MyInput onChange={this.handleSubmit} type={"submit"} value={"Login"}/>
                            <p>Not Registered? <a onClick={this.toSignUp} href={"#"}>Sign up</a></p>
                        </div> :
                        <div key={"signUp"} className={"form signUp"}>
                            <h2>Sign Up</h2>
                            <MyInput onChange={this.handleUpdateUser} icon={"user"} type={"text"} value={""} label={"username"}/>
                            <MyInput onChange={this.handleUpdateUser} icon={"email"} type={"text"} value={""} label={"email"}/>
                            <MyInput onChange={this.handleUpdateUser} icon={"lock"} type={"password"} value={""} label={"password"}/>
                            <MyInput onChange={this.handleUpdateUser} icon={"lock"} type={"password"} value={""} label={"confirmPassword"}/>
                            <MyInput onChange={this.handleSubmit} type={"submit"} value={"Create Account"}/>
                            <p>Already a member? <a onClick={this.toLogin} href={"#"}>Log In</a></p>
                        </div>
                }
            </div>
        );
    }
}
